<template>
  <el-dialog
    :model-value="dialogVisible"
    @close="$emit('close')"
    title="批量提交审核结果"
    width="70%"
    align-center
  >
    <h2 class="mb-25px">提交成功数量：{{ info?.success?.length || 0 }}</h2>
    <h2 class="my-25px">提交失败数量：{{ info?.failReason?.length || 0 }}</h2>
    <AsyncTable
      v-bind="failTable"
      ref="failTableRef"
      max-height="340px"
      :showSift="false"
      :isPage="false"
    />
    <template #footer>
      <el-button type="primary" @click="$emit('close')">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  info: {
    type: Array,
    default: () => []
  }
})
const failTable = ref({
  columns: [
    { type: 'index', label: '序号', width: '60px' },
    {
      label: '失败原因',
      render: ({ row }) => {
        return <div>{row}</div>
      },
      'min-width': '340px',
      'show-overflow-tooltip': true
    }
  ],
  data: []
})
onMounted(() => {
  failTable.value.data = props?.info?.failReason || []
})
</script>

<style lang="scss" scoped></style>
